<!-- <template>
  <div id="admin_home">
    <div class="while1">
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
      <div id="myChart1" :style="{width: '300px', height: '300px'}"></div>
      <div id="myChart2" :style="{width: '300px', height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  // 引入柱状图
  // require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  // require('echarts/lib/component/tooltip');
  // require('echarts/lib/component/title');
  export default {
    name: "home",
    data () {
        return {}
      },
      mounted(){
        this.getData();
      },
      methods: {
        //活动类型分布折线图
        myChartLine(x,y){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart2'))
            // 绘制图表
            myChart.setOption({
                title: { text: '活动类型分布折线图' },
                tooltip: {},
                xAxis: {
                  data: x
                },
                yAxis: {
                  // data: y
                },
                series: [{
                	// name: '销量',
                	type: 'line',
                	data: y
                }]
            });
        },
        // 活动类型分布柱形图
        myChartBar(x,y){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart1'))
            // 绘制图表
            myChart.setOption({
                title: { text: '活动类型分布柱形图' },
                tooltip: {},
                xAxis: {
                  data: x
                },
                yAxis: {
                  // data: y
                },
                series: [{
                	// name: '销量',
                	type: 'bar',
                	data: y
                }]
            });
        },
        // 活动类型分布饼图
        myChartPie(data){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '活动类型分布饼图' },
                tooltip: {},
                series: [{
                    // name: '销量',
                    type: 'pie',
                    data: data
                }]
            });
        },
        getData(){
          this.$axios.get(this.API+"/activity/activity/countActivityType").then((res)=>{
            console.log(res)
            this.myChartPie(res.data.data);
            this.BarData(res.data.data);
            // console.log(this.BarData(res.data.data))
          })
        },
        BarData(data){
          var name = []; var value = [];
          for(var i=0;i<data.length;i++){
            name.push(data[i].name);
            value.push(data[i].value);
          }
          // console.log(value)
          this.myChartBar(name,value);
          this.myChartLine(name,value);
        }
      },
  }
</script>

<style>
  #admin_home {
    height: 100%;
    background: #eaeff7;
  }
  .while1 {
    background-color: #FFFFFF;
    margin: 20px;
    border-radius: 5px;
    padding: 15px;
  }
  .el-table{
    height: 1000px;
  }
  .block{
    margin: 10px auto;
  }
  #admin_home{
    background-color: white;
    margin: 20px;
  }
</style>
 -->